<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/game_hall.css">
</head>
<body>
    <div class="nav">五子棋</div>
    <div class="container">
        <div>
            <!-- 显示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: '/user/getUserInfo',
            success: function(result) {
                if(result.status == 'success' && result.data != null) {
                    let screenDiv = document.querySelector('#screen');
                    var user = result.data;
                    screenDiv.innerHTML = '玩家：' + user.userName + ' 分数：' + user.score
                        + '<br>比赛场次：' + user.totalCount + ' 获胜场数：' + user.winCount;
                }
            }
        });

        // 初始化 webSocket
        let webSocketUrl = 'ws://' + location.host + '/findMatch';
        let webSocket = new WebSocket(webSocketUrl);
        webSocket.onopen = function() {
            console.log("onopen");
        }
        webSocket.onclose = function() {
            console.log("onclose");
        }
        webSocket.onerror = function() {
            console.log("onerror");
        }
        webSocket.onmessage = function(e) {
            // 处理服务器返回的响应数据
            let resp = JSON.parse(e.data);
            console.log(resp);
            let matchButton = document.querySelector('#match-button');
            if(resp.status == 'startMatch') {
                console.log("进入匹配队列成功");
                matchButton.innerHTML = '匹配中...(点击停止)';
            } else if (resp.status == 'stopMatch') {
                console.log("离开匹配队列成功!");
                matchButton.innerHTML = '开始匹配';
            } else if (resp.status == 'matchSuccess') {
                console.log("已经匹配到对手，进入游戏房间！");
                location.replace("/game_room.html");
            } else if(resp.status == 'repeatConnection'){
                alert("当前检测到多开！请使用其他账号登录！")
                location.replace("/login.html");
            }else if(resp.status == 'unlogin'){
                alert("请先进行登录！");
                location.replace("/login.html");
            }else {
                console.log("收到非法的响应! message = " + resp.errorMessage);
            }
        }
        // 监听页面关闭事件，在页面关闭之前，手动调用 webSocket 的 close 方法
        window.onbeforeunload = function() {
            webSocket.close();
        }

        // 为匹配按钮添加一个点击事件
        let matchButton = document.querySelector('#match-button');
        matchButton.onclick = function() {
            // 触发 webSocket 请求之前，先确定 webSocket 是否处于连接状态
            if(webSocket.readyState == webSocket.OPEN) {
                if(matchButton.innerHTML == '开始匹配') {
                    console.log("开始匹配")
                    webSocket.send(JSON.stringify({
                        message: 'startMatch',
                    }));
                } else if(matchButton.innerHTML == '匹配中...(点击停止)'){
                    console.log("结束匹配")
                    webSocket.send(JSON.stringify({
                        message: 'stopMatch',
                    }));
                } else {
                    alert("连接已断开！请重新登录！");
                    location.replace('/login.html');
                }
            }
        }
    </script>
</body>
</html>